<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片-->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容"  clearable >
            <el-button slot="append" icon="el-icon-search" ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加角色</el-button>
        </el-col>
      </el-row>

      <!--表格-->
      <el-table :data="listForm" stripe border style="width: 100%">
        <el-table-column prop="roleId" label="ID" width="80"></el-table-column>
        <el-table-column prop="roleName" label="名称" width="180"></el-table-column>
        <el-table-column prop="roleKey" label="标识"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column prop="createDate" label="日期" width="180">
          <template slot-scope="scope">
            {{scope.row.createDate | dateFormat}}
          </template>
        </el-table-column>

        <!--操作-->
        <el-table-column  label="操作">
          <template slot-scope="scope">
            <el-tooltip :enterable="false" effect="dark" content="编辑角色" placement="top">
              <el-button type="success" icon="el-icon-edit" size="mini" @click="detailClick(scope.row.roleId)"></el-button>
            </el-tooltip>
            <el-tooltip :enterable="false" effect="dark" content="分配角色" placement="top">
              <el-button type="warning" icon="el-icon-s-tools" size="mini" @click="authClick(scope.row.roleId)"></el-button>
            </el-tooltip>
            <el-tooltip :enterable="false" effect="dark" content="删除角色" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="delClick(scope.row.roleId)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!--分页区域-->
      <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[1, 2, 5, 10]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>

    </el-card>

    <!--添加对话框-->
    <el-dialog title="添加角色" :visible.sync="addDialogVisible" width="30%" @close="addHandleClose">
    <span>
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px" >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="addForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色标识" prop="roleKey">
          <el-input v-model="addForm.roleKey"></el-input>
        </el-form-item>
               <el-form-item label="备注" prop="remark">
          <el-input v-model="addForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <!--底部区域-->
    </span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addClick">确 定</el-button>
    </span>
    </el-dialog>

    <!--授权对话框-->
    <el-dialog title="角色授权" :visible.sync="allotDialogVisible" width="30%" @close="authDialogClosed">
    <span>
     <el-tree :data="menuTree" :props="defaultProps"
              ref="treeRef"
              show-checkbox node-key="menuId" default-expand-all
              :default-checked-keys="defaultKeys"></el-tree>
      <!--底部区域-->
    </span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="allotDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="allotClick">确 定</el-button>
    </span>
    </el-dialog>

    <!--编辑对话框-->
    <el-dialog title="编辑角色" :visible.sync="editDialogVisible" width="30%" @close="editHandleClose">
    <span>
      <el-form :model="editForm" label-width="80px" ref="editFormRef">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="editForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色标识" prop="roleKey">
          <el-input v-model="editForm.roleKey"></el-input>
        </el-form-item>
               <el-form-item label="备注" prop="remark">
          <el-input v-model="editForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <!--底部区域-->
    </span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="editDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="editClick">确 定</el-button>
    </span>
    </el-dialog>


  </div>
</template>

<script>
  import {roleHttp} from 'network/role'
  import {menuHttp} from 'network/menu'

  export default {
    data() {
      return {
        addDialogVisible: false,
        editDialogVisible: false,
        allotDialogVisible: false,
        pageNum: 1,
        pageSize: 10,
        total: 1,
        menuTree: {},
        defaultProps: {
          children: 'children',
          label: 'menuName'
        },
        role:{
          roleId:'',
          menuIdList: []
        },
        defaultKeys:[],
        listForm: [],
        addForm:{
          roleName:'',
          roleKey: '',
          remark: ''
        },
        editForm:{},
        addFormRules: {
          roleName: [
            { required: true, message: '请输入角色名称', trigger: 'blur' },
            {
              message: '用户名的长度在3~10个字符之间',
              trigger: 'blur'
            }
          ],
          roleKey: [
            { required: true, message: '请输入角色标识', trigger: 'blur' },
            {
              message: '用户名的长度在6~15个字符之间',
              trigger: 'blur'
            }
          ],
        },

      };
    },
    methods: {
      //监听添加用户对话框的关闭事件，重置表单内容
      addHandleClose(){
        this.$refs.addFormRef.resetFields()
      },

      //监听编辑用户对话框的关闭事件,重置表单内容
      editHandleClose(){
        this.$refs.editFormRef.resetFields()
      },

      //监听当前页的事件
      handleCurrentChange(pageIndex){
        console.log(pageIndex);
        this.pageNum = pageIndex;
        roleHttp.listPage(this.pageNum,this.pageSize).then(res => {
          this.listForm = res.data.list;
          this.total = res.data.total;
          this.pageNum = res.data.pageNum;
        });
      },

      //监听当前页的条数事件
      handleSizeChange(pageIndex){
        console.log(pageIndex);
        this.pageSize = pageIndex;
        roleHttp.listPage(this.pageNum,this.pageSize).then(res => {
          this.listForm = res.data.list;
          this.total = res.data.total;
          this.pageNum = res.data.pageNum;
        });
      },

      userStateChanged(userinfo){
        console.log(userinfo)
      },

      //添加角色
      addClick(){
        this.$refs.addFormRef.validate(valid =>{
          if (!valid) return
          roleHttp.add(this.addForm).then(res=>{
            if (res.code === 20000){
              this.$message.success(res.message)
              //刷新数据
              this.initList()
            } else{
              this.$message.error(res.message)
            }
            //关闭对话框
            this.addDialogVisible = false;
          })
        })
      },

      //角色授权
      allotClick(){
        this.role.menuIdList = [
          ...this.$refs.treeRef.getCheckedKeys(),//获取全选的menuId
          ...this.$refs.treeRef.getHalfCheckedKeys() //获取半选的menuId
        ]
        roleHttp.auth(this.role).then(res => {
          if (res.code === 20000){
            this.$message.success(res.message)
          } else{
            this.$message.error(res.message)
          }
          //关闭对话框
          this.allotDialogVisible = false;
        })
      },

      // 监听分配权限对话框的关闭事件
      authDialogClosed() {
        this.defaultKeys = []
      },

      //菜单列表
      authClick(roleId){
        this.allotDialogVisible = true;
        this.role.roleId = roleId
        menuHttp.tree().then(res=>{
          this.menuTree = res.data
        })

        roleHttp.get(roleId).then(res => {
          this.defaultKeys = res.data.menuIds
          console.log(res.data);
        })
      },

      //编辑角色
      editClick(){
        roleHttp.edit(this.editForm).then(res => {
          if (res.code === 20000){
            this.$message.success(res.message)
            //刷新数据
            this.initList()
          } else{
            this.$message.error(res.message)
          }
          //关闭对话框
          this.editDialogVisible = false;
        })
      },

      //角色详情
      detailClick(roleId){
        this.editDialogVisible = true;
        roleHttp.get(roleId).then(res => {
          this.editForm = res.data
        })
      },

      //删除角色
      delClick(roleId) {
        console.log(roleId);
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //确认操作
          roleHttp.del(roleId).then(res=>{
            if (res.code === 20000){
              this.$message.success(res.message)
              //刷新数据
              this.initList()
            } else{
              this.$message.error(res.message)
            }
          });
        })
      },

      //初始化列表页面
      initList(){
        roleHttp.listPage(this.pageNum,this.pageSize).then(res => {
          this.listForm = res.data.list;
          this.total = res.data.total;
          this.pageNum = res.data.pageNum;
        })
      },

    },
    created(){
      //初始化列表
      this.initList()
    }
  }
</script>

<style scoped>

</style>
